<template>
    <el-drawer
        :visible.sync="showRelatedBless"
        title="关联资源"
        size="70%"
        :close-on-press-escape="false"
        :show-close="false"
        @close="closeDialog"
        @open="handleOpen"
        destroy-on-close>
        <div class="bodyBox">
            <div class="actionform">
                <el-table
                    :data="dataList"
                    border
                    :row-key="getRowKeys"
                    ref="relatedBlessTable"
                    @selection-change="handleSelectionChange"
                    :header-cell-style="{background:'#f8f8f8',color:'#606266'}" height="600">
                    <el-table-column align="left" type="selection" reserve-selection width="40"></el-table-column>
                    <el-table-column prop="listImageUrl" align="center" width="150" label="商品图片">
                        <template slot-scope="scope">
                            <img v-image-preview :src="scope.row.listImageUrl" width="60" height="60" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="sourceInfo" align="left" width="200" label="商品名称">
                        <template slot-scope="scope">
                            <p>{{scope.row.productName}}</p>
                            <!-- <p>品牌：{{scope.row.salePrice}}</p> -->
                            <!-- <p>{{scope.row.originPrice}}</p> -->
                        </template>
                    </el-table-column>
                    <el-table-column align="left" width="200" label="进价/心意价/原价">
                        <template slot-scope="scope">
                            <p>进价：<span class="text-price">{{$util.prices(scope.row.minPrice)}}</span></p>
                            <p style="text-align: right;">心意价：<span class="text-price">{{$util.prices(scope.row.salePrice)}}</span></p>
                            <p>原价：<span class="text-price">{{$util.prices(scope.row.originPrice)}}</span></p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="saleCount" align="center" width="200" label="销量"></el-table-column>
                    <el-table-column prop="usableStock" align="center" width="200" label="库存"></el-table-column>
                </el-table>
                 <!--  底部分页  -->
                <div class="footer flex-between">
                    <el-checkbox
                        v-model="checkAll"
                        :disabled="!dataList.length"
                        @change="handleCheckAllChange">全选</el-checkbox>
                    <el-pagination
                        @current-change="handleCurrentChange"
                        :current-page="page"
                        :page-size="10"
                        background
                        :total="count"
                        layout="total, prev, pager, next, jumper"></el-pagination>
                </div>
            </div>
            <div class="footer flex-center">
                <el-button type="primary" @click="handlePost">确  认</el-button>
                <el-button @click="closeDialog">取  消</el-button>
            </div>
        </div>
    </el-drawer>
</template>

<script>
    import {
		campaignsList,
    } from "@/api/table";

    export default {
        name: "RELATED_BLESS",
        components: {},
        props: {
            show: {
                type: Boolean,
                default() {
                    return false
                }
            },
            relatedData: {
                type: Array,
                default() {
                    return []
                }
            },
        },

        data() {
            return {
                count: 0,
                page: 0,
                dataList: [],
                showRelatedBless: false,
                checkAll: false,
                selectList: []
            }
        },
        watch: {
			show(newVal, oldVal) {
				this.showRelatedBless = newVal
            },
            relatedData(newVal, oldVal) {
                return newVal
            }
		},
        created() {
            this.getData()
        },
      	methods: {
            // 监听drawer打开
            handleOpen() {
                // drawer 是懒加载， 需要延迟获取真实dom
                setTimeout(() => {
                    this.dataList.map(item => {
                        this.relatedData.map(i => {
                            if (item.productUid === i.productUid) {
                                this.setRow(item);
                                return i
                            }
                        })
                        return item
                    })
                }, 500)
            },
            getData() {
                campaignsList({
                    campaignState: 3,
                    page: this.page
                }).then(res => {
                    if (res.data.isSuccessful === "Y") {
                        const {
                            count,
                            campaignsList
                        } = res.data.data;
                        this.count = count;
                        this.dataList  = campaignsList;
                    }
                }).finally(() => {});
            },
            // 监听选择的内容
            handleSelectionChange(val) {
                this.selectList = val;
                this.checkAll = this.dataList.length === val.length
            },
            getRowKeys(row) {
                return row.productUid;
            },
            // 全选
            handleCheckAllChange(val) {
                if (val) {
                    this.$refs.relatedProductsTable.toggleAllSelection();
                } else {
                    this.$refs.relatedProductsTable.clearSelection();
                }
                this.selectList = val ? this.dataList : [];
            },
            // 分页
            handleCurrentChange(val) {
                this.page = val;
                this.getData();
            },
            // 清空选择
            clearRow() {
                this.$refs.relatedProductsTable.clearSelection();
            },
            // 设置table高亮
            setRow(row) {
                this.$refs.relatedProductsTable &&　this.$refs.relatedProductsTable.toggleRowSelection(row);
            },
			// 确认
			handlePost() {
				this.$event.emit('RelatedBless', this.selectList)
			},
			closeDialog() {
                this.clearRow();
				this.$event.emit('CloseRelatedBless')
			},
      	},
  	}
</script>
<style lang="scss" scoped>
	.bodyBox {
		padding: 0 50px;
		.actionform {
			min-height: 600px;
		}
	}
</style>

